<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px] mt-[8px] pb-[16px]">
    <FormTitle title="装箱单信息" />
    <div class="bg-[var(--base-table-hover-bg-color)] rounded-t-[8px] p-[8px]">
      <div class="text-[14px] text-[var(--base-text-color)]">客户: {{info?.prediction?.offshore_consignee}}</div>
      <div class="flex justify-between">
      <div>
        <div>
          <span class="text-[18px] text-[#E50113] mr-[24px]">{{list?.contract_number||'-'}}</span>
          <span class="text">付款条款: {{list?.payment_terms||'-'}}</span>
          <span class="text">船名: {{list?.ship_name||'-'}}</span>
          <span class="text">唛头: {{list?.marking||'-'}}</span>
        </div>
        <div>
          <span class="text">出发地: {{list?.departure||'-'}}</span>
          <span class="text">目的地: {{list?.destination||'-'}}</span>
        </div>
      </div>
      <div>
        <div>
          <span class="text">合约号: {{list?.contract_number||'-'}}</span>
          <span class="text">发票编号: {{list?.invoice_no||'-'}}</span>
          <span class="text">日期: {{list?.box_date||'-'}}</span>
        </div>
      </div>
      </div>
    </div>
    <vxe-grid v-bind="tableOptions" max-height="300px"> </vxe-grid>
  </div>
</template>

<script setup>
import FormTitle from "@/components/Form/FormTitle.vue";
const props = defineProps({
  data: { type: Object, default: () => {} },
  info: { type: Object, default: () => {} },
  
});
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "序号",
      width: 50,
      field: "xno",
    },
    {
      title: "箱号",
      width: 150,
      field: "box_no",
    },
    {
      title: "货物名称",
      minWidth: 180,
      field: "goods_name",
    },
    {
      title: "规格",
      width: 180,
      field: "specification",
    cellRender: { name: 'arrMap' }
    },
    {
      title: "总数/件",
      width: 160,
      field: "item_counts",
    },
    {
      title: "总数量",
      width: 160,
      field: "total_nums",
    },
    {
      title: "总毛重/KG",
      width: 160,
      field: "gross_weight_kg",
    },
    {
      title: "总净重/KG",
      width: 160,
      field: "net_weight_kg",
    },
  ],
});
const list = reactive({
  invoice_no: null,
  ship_name: null,
  departure: null,
  destination: null,
  marking: null,
  out_prediction_boxes_id: null,
  out_prediction_id: null,
  id: null,
  box_date: null,
  customer: null,
  contract_number: null,
  payment_terms:null
});
watch( () => props.data, (val) => {
    if (val) {
      tableOptions.data = val?.details || [];
      Object.keys(list).forEach((key) => {
        list[key] = val[key];
      });
      console.log(998877);
      console.log(list);
    }
  },
  {
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
  color: var(--base-text-color);
  line-height: 30px;
  margin-right: 24px;
}
</style>
